<template>
  <div class="shop-container">
    <Topbar v-if="showGood || showDetail" />
    <GoodBar v-if="showGood || showDetail" />
    <div v-if="showGood">
      <MainScreen />
      <MiddleBoard />
      <GoodList
    /></div>
    <div v-else-if="showCart">
      <Cart />
    </div>
    <div v-else-if="showDetail">
      <Detail />
    </div>
    <Service />
    <Footer></Footer>
    <BackTop :action="action" />
  </div>
</template>

<script setup lang="ts">
  import { useListenScroll } from "../../hooks/UseListenScroll";
  import { useRoute } from "vue-router";
  import Topbar from "./components/Topbar.vue";
  import GoodBar from "./components/GoodBar.vue";
  import MainScreen from "./components/MainScreen.vue";
  import MiddleBoard from "./components/MiddleBoard.vue";
  import Footer from "./../../components/Footer.vue";
  import BackTop from "../../components/BackTop.vue";
  import GoodList from "./components/GoodList.vue";
  import Service from "./components/Service.vue";
  import Cart from "./Buy/components/Cart.vue";
  import Detail from "./Buy/components/Detail.vue";

  const { action } = useListenScroll();

  const route = useRoute();
  const showGood = computed(() => route.path === "/shop");
  const showCart = computed(() => route.path === "/shop/buy/cart");
  const showDetail = computed(() => route.path.includes("detail"));
</script>

<style scoped>
  .shop-container {
    min-width: 1420px;
    height: 100%;
  }
</style>
